<template>
  <section class="content">
    <el-row class="model-form">
      <el-col :span="4">
        <el-menu style="min-height: 850px" :default-active="activeIndex" @select="handleSelect">
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">基本信息</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-document"></i>
            <span slot="title">基本设置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"> </router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"> </router-view>
      </el-col>
    </el-row>
    <!-- Default box -->
  </section>
</template>

<script>
  export default {
    name: "system_layout",
    data() {
      return {
        activeIndex: "1",
      };
    },
    methods: {
      handleSelect(event) {
        this.selectIndex = event;
        if (event == "1") {
          this.$router.replace({
            path: "/system/index",
            query: {
              activeIndex: 1,
              time: Math.random()
            },
          });
        } else if (event == "2") {
          this.$router.replace({
            path: "/system/setting",
            query: {
              activeIndex: 2,
              time: Math.random()
            },
          });
        } else {
          console.info("hi");
        }
      },
    },
    mounted() {
      var activeIndex = this.$route.query.activeIndex;
      if (activeIndex) {
        this.activeIndex = activeIndex;
      }
    },
  };
</script>

<style scoped>
  .el-menu {
    border-right: solid 1px #e6e6e6 !important;
  }

  .el-menu-item.is-active {
    background-color: white;
  }
</style>